<!--  -->
<template>
  <div>
    <el-button type="primary" size="mini" @click="importClick">前台解析导入</el-button>
    <el-dialog title="批量导入" :visible="importVisible" :close-on-click-modal="false" :before-close="handleImportClose" width="30%">
      <el-form ref="importForm" :model="importForm" size="small" label-width="80px" :rules="importRules">
        <el-form-item label="导入文件" prop="importFileName">
          <el-input :readonly="true" v-model="importForm.importFileName" placeholder="导入文件">
            <el-upload slot="append" action="" :multiple="false" :show-file-list="false" accept=".xlsx" :auto-upload="false" :file-list="fileList"
              :limit="1" :on-change="changeFile">
              <el-button>选择文件</el-button>
            </el-upload>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="mini" @click="handleImportClose">取消</el-button>
        <el-button type="primary" size="mini" :loading="importLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx/xlsx.mjs'
export default {
  components: {},
  data() {
    return {
      // 显示/隐藏导入界面
      importVisible: false,
      // 导入加载
      importLoading: false,
      // 文件数据
      fileData: [],
      // 文件列表
      fileList: [],
      // 导入文件名
      importForm: {
        importFileName: "",
      },
      // 上传验证规则
      importRules: {
        importFileName: [
          {
            required: true,
            message: "请选择导入文件",
            trigger: "change",
          },
          {
            validator: (_rule, value, callback) => {
              if (!value.endsWith("xlsx")) {
                return callback(new Error("文件格式错误"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  created() { },
  mounted() { },
  methods: {
    importClick() {
      this.importVisible = true,
        this.$nextTick(() => {
          this.$refs.importForm.clearValidate("importFileName");
        });
      this.$refs.importForm.resetFields();
    },
    // 取消导入
    handleImportClose() {
      this.importLoading = false;
      this.importVisible = false;
      this.importForm.importFileName = "";
      this.fileList = [];
      this.fileData = [];
      this.$refs.importForm.resetFields();
    },
    changeFile(file) {
      this.importForm.importFileName = file.name;
      var reader = new FileReader();
      reader.readAsBinaryString(file.raw);
      reader.onload = (res) => {
        const data = res.target.result
        const workbook = XLSX.read(data, {
          type: 'binary',
        })
        let outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
        this.fileData = []
        for (let item of outdata) {
        //   this.fileData.push()
        }
      }
      console.log("解析数据", outdata)
    },

  },
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>